 :root {
     --primary: #1e9fff;
     --success: #1e9;
     --danger: #ee0b0b;
     --warning: #f16b21;
     --info: #ececec;
 }

 .ripple-button {
      position: relative;
      overflow: hidden;
      padding: 12px 24px;
      border: none;
      background-color: #007bff;
      color: white;
      font-size: 16px;
      cursor: pointer;
      --ripple-color: rgba(255, 255, 255, 0.5);
 }

 .ripple-button:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-radius: 50%;
      background-color: var(--ripple-color);
      transform: scale(0);
      pointer-events: none;
 }

 .ripple-button.ripple-active:after {
      animation: rippleEffect 0.5s ease-out;
 }

 @keyframes rippleEffect {
      to {
           transform: scale(var(--ripple-size));
           opacity: 0;
      }
 }
